<template>
  <ekDialog v-model="ekVisiable" title="抵达海外仓库" @submit="handleSubmit">
    <div style="padding-right: 20px">
      <div>
        <div
          class="mb-20"
          style="
            color: #999;
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
          "
        >
          <div class="flex" style="color: #333">
            柜号列表：{{ cabinetNumbers?.join(",") || "" }}
          </div>
          <div class="flex">
            <div class="f-14 mt-4">总包裹数：{{ orderList?.length || 0 }}</div>
            <div class="f-14 mt-4 ml-20">
              总用户数：{{ userList?.length || 0 }}
            </div>
          </div>
        </div>
        <div
          class="submit-item"
          v-if="outboundList?.length && !loading"
          style="text-align: left"
        >
          <template v-for="(detail, index) in outboundList" :key="index">
            <div class="flex">
              <div class="mt-15">
                <div class="f-14" style="color: #333">
                  出库单号：{{ detail.transfer_outbound_no }}
                </div>
                <div class="f-12 mt-4" style="color: #999">
                  出库时间：{{
                    moment(Number(detail.transfer_outbound_time) * 1000).format(
                      "YYYY-MM-DD HH:mm"
                    )
                  }}
                </div>
                <div class="f-12 mt-4" style="color: #999">
                  柜号：{{ detail.transfer_cabinet_number }}
                </div>
              </div>
              <div
                class="f-12 mt-8 ml-20"
                style="padding-left: 20rpx; color: #999; display: flex"
              >
                <template v-if="detail.transfer_outbound_images?.length">
                  <el-image
                    v-for="(item, index) in detail.transfer_outbound_images"
                    :key="index"
                    style="width: 60px; height: 60px; border-radius: 4px"
                    :src="$imageBaseUrl + item"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[$imageBaseUrl + item]"
                    :initial-index="0"
                    fit="cover"
                  />
                </template>
              </div>
            </div>
            <el-divider content-position="left">包含转运单</el-divider>

            <el-table :data="getTransferSubData(detail)">
              <el-table-column type="expand">
                <template #default="props">
                  <div class="ml-30">
                    <p class="f-12 mt-8 ml-30">
                      转运单号： {{ props.row.transfer_no }}
                    </p>

                    <el-divider content-position="left">包含包裹</el-divider>
                    <div style="padding: 0 20px">
                      <el-table
                        ref="table"
                        stripe
                        :data="getSubData(props.row)"
                        :border="false"
                      >
                        <el-table-column
                          prop="order_logistic_no"
                          label="快递单号"
                        ></el-table-column>
                        <el-table-column
                          prop="order_transport_type"
                          label="包裹类型"
                        >
                          <template v-slot="scope">
                            {{
                              getLable(
                                transportType,
                                scope.row.order_transport_type
                              )
                            }}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="order_good_length"
                          label="包裹尺寸(cm)"
                          width="140"
                        >
                          <template v-slot="scope">
                            {{ scope.row.order_good_length }} *
                            {{ scope.row.order_good_width }} *
                            {{ scope.row.order_good_height }}
                          </template>
                        </el-table-column>

                        <el-table-column
                          prop="order_good_weight"
                          label="体积(m³)"
                          width="140"
                        >
                          <template v-slot="scope">
                            {{
                              Number(
                                (scope.row.order_good_width *
                                  scope.row.order_good_height *
                                  scope.row.order_good_length) /
                                  1000000
                              ).toFixed(3)
                            }}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="order_good_weight"
                          label="货品重量(kg)"
                          width="140"
                        ></el-table-column>
                        <el-table-column prop="manage_account" label="入库员">
                          <template v-slot="scope">
                            {{ scope.row.manage_account }}
                            <span
                              style="color: #999"
                              v-if="scope.row.order_inbound_manage"
                              >（{{ scope.row.order_inbound_manage }}）</span
                            >
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="order_inbound_time"
                          label="入库时间"
                          width="160"
                        >
                          <template v-slot="scope">
                            {{ scope.row.order_inbound_time }}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="order_inbound_images"
                          label="入库图片"
                        >
                          <template v-slot="scope">
                            <template
                              v-if="scope.row.order_inbound_images?.length"
                            >
                              <el-image
                                @click="
                                  handleShowImage(
                                    scope.row.order_inbound_images
                                  )
                                "
                                :teleported="true"
                                v-for="(item, index) in scope.row
                                  .order_inbound_images"
                                :key="index"
                                style="width: 100px; height: 100px"
                                :src="$imageBaseUrl + item"
                                :zoom-rate="1.2"
                                :max-scale="7"
                                :min-scale="0.2"
                                fit="cover"
                              />
                            </template>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="转运单号" prop="transfer_no" width="250">
              </el-table-column>
              <el-table-column label="运输方式" prop="transfer_mode">
                <template #default="scope">
                  {{ getLable(transportMode, scope.row.transfer_mode) }}
                </template>
              </el-table-column>
              <el-table-column label="用户编号" prop="user_nick">
                <template #default="scope">
                  {{ scope.row.user_id }}
                  <span v-if="scope.row.user_nick">{{
                    scope.row.user_nick
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="金额"
                prop="transfer_price"
              ></el-table-column>
            </el-table>

            <!--  -->
          </template>
        </div>
      </div>
    </div>
  </ekDialog>
</template>

<script setup>
import {
  watch,
  getCurrentInstance,
  computed,
  reactive,
  ref,
  defineEmits,
  onMounted,
} from "vue";
import { apis } from "../data.js";
import ekDialog from "@/components/business/ekDialog/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekTableSelect from "@/components/form/ekTableSelect/index.vue";
import ekSelectModel from "@/components/form/ekSelectModel/index.vue";
import ekUploadImage from "@/components/form/ekUploadImage/index.vue";
import ekTip from "@/components/business/ekTip/index.vue";
import { objectAssignment, getLable } from "@/utils/common.js";

import { getDimensionByCode } from "@/utils/sys.js";
import moment from "moment";

const props = defineProps({
  // 显示隐藏
  visiable: {
    type: Boolean,
    default: false,
  },
  rowArr: {
    type: Array,
    default: "",
  },
});
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekLoading, $ekMessage, $uploadUrl } =
  globalProperties;

const emit = defineEmits(["update:visiable", "submit"]);

// 是否显示
const ekVisiable = computed({
  get() {
    return props.visiable;
  },
  set(value) {
    emit("update:visiable", value);
  },
});
const outList = computed(() => {
  return props.rowArr;
});
const cabinetNumbers = computed(() => {
  return [
    ...new Set(outList.value.map((item) => item.transfer_cabinet_number)),
  ];
});
function handleSubmit(done) {
  let url = apis.arrive;

  let imgs = [];
  if (form.value.order_outbound_images) {
    imgs = JSON.parse(form.value.order_outbound_images).map(
      (item) => item.path
    );
  }

  let arr = props.rowArr.map((item) => item.transfer_cabinet_number);
  const cabinet_numbers = [...new Set(arr)];
  $http
    .request({
      url: url,
      method: "PUT",
      data: {
        cabinet_numbers: cabinet_numbers,
      },
    })
    .then((res) => {
      $ekMessage.success(res.message);
      emit("submit", done);
    })
    .catch((err) => {});
}
const loading = ref(false);
let forms = ref(null);
let form = ref({});
const initData = () => {
  form.value = {};
};

const getSubData = (item) => {
  console.log(item, "item");
  let list = orderList.value.filter((detail) => {
    return detail.transfer_id == item.id;
  });
  console.log(list, "ggggggggggggg");
  return list?.length ? list : [];
};
const getTransferSubData = (item) => {
  let list = transferList.value.filter((detail) => {
    return detail.transfer_outbound_no == item.transfer_outbound_no;
  });
  console.log(list, "ggggggggggggg");
  return list?.length ? list : [];
};
let rules = reactive({});

let orderList = ref([]);
let transferList = ref([]);
let outboundList = ref([]);
let userList = ref([]);
const transportType = ref({});
const transportMode = ref({});
const payState = ref({});

// 初始化表单
async function init() {
  loading.value = true;
  // 详情或者编辑
  let arr = props.rowArr.map((item) => item.transfer_cabinet_number);
  const cabinet_numbers = [...new Set(arr)];
  let res = await $http.get(apis.getTransitDeatil, {
    params: {
      cabinet_numbers: cabinet_numbers,
    },
  });
  transportType.value = res.data.type;
  transportMode.value = res.data.mode;
  orderList.value = res.data.order_list;
  transferList.value = res.data.transfer_list;
  outboundList.value = res.data.outbound_list;
  userList.value = res.data.user_list;
  loading.value = false;
}
watch(
  () => props.visiable,
  async (val) => {
    if (val) {
      initData();
      await init();
    }
  }
);
onMounted(async () => {
  let res = await getDimensionByCode("DIM_PAY_STATE");

  payState.value = res.map((item) => ({
    label: item.dimension_name,
    value: item.dimension_code,
  }));
});
</script>

<style scoped lang="scss"></style>
